<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";


const option = ref({
  angleAxis: {
    show: 0,
    clockwise: true,
    max: 100,
  },
  radiusAxis: {
    type: 'category',
    data: ['产品A', '产品B', '产品C'],
    z: 10,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      color: '#fff',
      align: 'right',
      margin: 20,
    },
  },
  polar: {
    show: 0,
    center: ['50%', '50%'],
  },
  series: [
    {
      type: 'bar',
      data: [66.7, 78, 75],
      label: {
        show: false,
        position: 'top',
      },
      barWidth: 10,
      coordinateSystem: 'polar',
    },
  ],
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      分产品采购完成率
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>